CSS

HTML

Een super-eenvoudig html-bestand ziet er als volgt uit:
<!doctype html>
<html lang="en-US">
<head>
    <title>Fox</title>
</head>
<body>
    the quick brown fox jumps over the lazy dog.
</body>
</html>       
De stukjes tekst die beginnen met < en eindigen met > heten tags. Tags komen voor in paren. Zo zie in bovenstaande html-code de paren <html> en </html>, <body> en </body>, <title> en </title>, <div> en </div>. Tags die beginnen met </ gevolgd door een letter zijn sluit-tags. De andere, die beginnen met < gevolgd door een letter, zijn openings-tags. Een tekstgedeelte dat begint met een openings-tag en eindigt met een overeenkomstige sluit-tag worden in HTML een element genoemd.

Als je dit bestand met een browser laat zien, zie je zoiets als
De regel "the quick brown fox jumps over the lazy dog" bevat alle letters van het alfabet. Het gedeelte van het scherm waarin body-element van de html-code wordt getoond, heet de viewport. Op een mobiele telefoon heeft de viewport een vast grootte voor de portrait-stand en de landscape-stand. Op een PC kun je de grootte van de viewport wijzigen door het browser-venster groter of kleiner te maken.

De layout past zich aan aan de breedte van de viewport

Je kunt veel meer tekens tonen dan alleen maar de letters van het alfabet. Hier is een voorbeeld. De hml-code ziet er als volgt uit:
<!doctype html>
<html lang="en-US">
    <head>
        <title>Tekens</title>
    </head>
    <body>
        THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
        the quick brown fox jumps over the lazy dog. 
        !?;&eacute;&egrave;&euml;&ntilde;&ccedil;
        &alpha;&beta;&gamma;&delta;&epsilon;
        &eta;&theta;&zeta;&iota;&kappa;
        &lambda;&mu;&nu;&xi;&omicron;
        &pi;&rho;&sigma;&sigmaf;&tau;
        &upsilon;&phi;&chi;&psi;&omega;
        &Gamma;&Delta;&Theta;&Lambda;&Xi; 
        &Pi;&Sigma;&Phi;&Psi;&Omega;
        &#1488;&alefsym;&oslash;&Oslash;
        &Nopf;&Zopf;&Qopf;&Ropf;&Copf;&Hopf;
        &frac14;&frac12;&frac34;&frac15;&frac25;&frac16;&frac18;
        &plus; &minus;&times;&divide; 
        &radic;&#8731;&#8732;
        &equals; &ne; &asymp; &equiv;
        &lt; &gt;
        &amp;&check;&cross; 
        &#10112;&#10113;&#10114;&#10115;&#10116;
        &#10117;&#10118;&#10119;&#10120;&#10121;
        &#9322;&#9323;&#9324;&#9325;&#9326;
        &#9327;&#9328;&#9329;&#9330;&#9331;
        &#10122;&#10123;&#10124;&#10125;&#10126;
        &#10127;&#10128;&#10129;&#10130;&#10131;
        &dollar;&pound;&euro;&yen;
        &#9993;&#x2709;&#x2708;&#9951; &#9972; 
        &copy;&reg;
        &square;&triangle;
        &spades;&hearts;&#9825;&diams;&#9826;&clubs;
        &#9812;&#9813;&#9814;&#9815;&#9816;&#9817;
        &#9818;&#9819;&#9820;&#9821;&#9822;&#9823;
    </body>
</html>       
Als je deze html-code met een browser laat zien, zie je zoiets als:
Binnen HTML wordt default de codering van UTF-8 gebruikt om allerlei speciale tekens af te drukken. UTF staat voor Unicode Transformation Format. Als je op internet met de zoekterm unicode zoekt, vind je allerlei sites waar wordt verteld welke codes corresponderen met welk plaatje. Binnen unicode hebben allerlei tekens een nummer gekregen. Zo heeft het teken ✉ het nummer 9993 gekregen. Als je het getal 9993 schrijft in het zestientallig stelsel, wordt dit 2709, want 2×163 + 7×162 + 0×161 + 9×160 = 9×4096 + 7×256 + 9 = 8192 + 1792 + 9 = 9993. Daarom kun je het teken ✉ binnen HTML weergeven met zowel &#9993; als met &#x2709;. De x in de laatste schrijfwijze &#x2709; komt van het woord hexadecimaal, wat het internationale woord voor zestientallig is. Voor veel tekens is ook een handig te onthouden omschrijving bedacht. Zo kun je het euro-teken € ook weergeven met &euro;

In dit bovenstaand voorbeeld staat alle tekst tussen de tags <body> en </body>, met andere woorden: in het body-element. Als het aantal tekens te lang is om binnen de breedte van het body-element te passen, wordt de regel afgebroken en op een volgende regel vervolgd. Als we het browser-venster iets breder maken, wordt de regels langer, en wordt de tekst op andere plaatsen afgebroken. In onderstaand voorbeeld is dezelfde tekst niet over zes, maar over vijf regels verdeeld.
Als je een enkel kort stukje tekst wat groter wilt maken kun je het omgeven met <font>- en <font>-tags.
Bijvoorbeeld: <font size="6">&#10122;</font> leidt tot .
Je kunt op die manier ook de kleur van een stukje tekst veranderen.
<font size="5" color="red">&#10122;</font> leidt tot

<a>, <img>, <svg> volgen de regels die voor tekst gelden

Als je een plaatje invoegt, wordt dat door de browser geïnterpreteerd als een gewone letter. Het plaatje verschijnt tussen de andere letters in de tekst. Ook een <a>-element wordt als gewone tekst behandeld.

Het html-bestand
<!doctype html>
<html lang="en-US">
    <head>
        <title>Inline elementen</title>
    </head>
    <body>
        THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
        the quick brown fox jumps over the lazy dog. 
        !?;&eacute;&egrave;&euml;&ntilde;&ccedil;
        &lt;b&gt;&alpha;&beta;&gamma;&delta;&epsilon;&lt;/b&gt;
        &alpha;&beta;&gamma;&delta;&epsilon;
        &eta;&theta;&zeta;&iota;&kappa;
        &lambda;&mu;&nu;&xi;&omicron;
        &pi;&rho;&sigma;&sigmaf;&tau;
        &upsilon;&phi;&chi;&psi;&omega;
        &Gamma;&Delta;&Theta;&Lambda;&Xi; 
        &Pi;&Sigma;&Phi;&Psi;&Omega;
        &#1488;&alefsym;&oslash;&Oslash;
        &Nopf;&Zopf;&Qopf;&Ropf;&Copf;&Hopf;
        &lt;b&gt;&Nopf;&Zopf;&Qopf;&Ropf;&Copf;&Hopf;&lt;/b&gt;
        &frac14;&frac12;&frac34;&frac15;&frac25;&frac16;&frac18;
        &plus; &minus;&times;&divide; 
        &radic;&#8731;&#8732;
        &equals; &ne; &asymp; &equiv;
        &lt; &gt;
        &amp;&check;&cross;
        <img id="rood_geel" src="css_0003_rood_geel_16_16.bmp">
        &#10112;&#10113;&#10114;&#10115;&#10116;
        &#10117;&#10118;&#10119;&#10120;&#10121;
        &#9322;&#9323;&#9324;&#9325;&#9326;
        &#9327;&#9328;&#9329;&#9330;&#9331;
        &#10122;&#10123;&#10124;&#10125;&#10126;
        &#10127;&#10128;&#10129;&#10130;&#10131;
        <svg width="16" height="16">
            <rect x="0" y="0" width="16" height="16" fill="palegreen" 
                     stroke="blue" stroke-width="1" />
        </svg> 
        &dollar;&pound;&euro;&yen;
        &#9993;&#x2709;&#x2708;&#9951; &#9972; 
        &copy;&reg;
        &square;&triangle;
        &spades;&hearts;&#9825;&diams;&#9826;&clubs;
        &#9812;&#9813;&#9814;&#9815;&#9816;&#9817;
        &#9818;&#9819;&#9820;&#9821;&#9822;&#9823;
         <a href="#rood_geel">abc</a>       
    </body>
</html>       
wordt door de browser weergegeven als
Het als bitmap-bestand opgeslagen plaatje css_0003_rood_geel_16_16.bmp is 16 pixels breed en 16 pixels hoog. Dat is net zo hoog als het standaard lettertype van de meeste browsers. Sterk vergroot ziet het er als volgt uit:
Het plaatje dat is gedefinieerd met behulp van SVG (Scalable Vector Graphics) is niet vastgelegd in een afzonderlijk bestand. Je kan het groter afbeelden door een andere width en height op te geven, bijvoorbeeld :
<svg width="128" height="128">
    <rect x="0" y="0" width="128" height="128" fill="palegreen" 
         stroke="blue" stroke-width="8" />
</svg>
De stroke-width bepaalt de dikte van de rand, en die vermenigvuldigden we - net als de width en de height - met 8. Je krijgt dan:

Inline elementen

We zagen hierboven dat de elementen img, svg en a zich met de tekst meebewegen, als de viewport groter of kleiner wordt gemaakt. Deze elementen noemen we inline-elementen.

Verwijzen naar een stylesheet vanuit een HTML-bestand

In een HTML-bestand kun je een verwijzing naar een stylesheet opnemen vanuit het <head>-element. Een stylesheet moet de extensie css hebben. Daarom wordt zo'n stylesheet ook wel een css-bestand genoemd. Als het css-bestand niet bestaat, wordt de regel om het html-bestand en het css-bestand aan elkaar te koppelen, niet uitgevoerd. Ook als het css-bestand leeg is - dus wanneer het er wel is, maar er niets in staat - verandert er niets. In het volgende voorbeeld wordt vanuit een html-bestand verwezen naar een css-bestand met de naam styles.css.
<!DOCTYPE html>
<html lang="nl">
    <head>
        <meta charset="utf-8">
        <title>HTML</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        Tekst 
    </body>
</html> 

De inhoud van een css-bestand

Een css-bestand bevat zg. rulesets. In een ruleset wordt aangegeven hoe de een gedeelte van een html-pagina moet worden weergegeven. Een ruleset ziet er bijvoorbeeld als volgt uit:
body {
        color: black;
        font-family: Helvetica;
}
De volgende illustratie geeft aan hoe de verschillende onderdelen van de ruleset heten.

Een selector geeft aan welk deel van het html-bestand het betreft. Het declaratie-blok geeft aan wat er voor dat deel van het html-bestand geldig is. In dit voorbeeld staat er dat tekst getoond wordt in zwarte letters, en dat het lettertype helvetica is. Als helvetica niet beschikbaar is op de computer wordt tekst in het default lettertype van de computer getoond.

Selector

Je kunt een opmaak-eigenschap via een selector aan een element, class of id koppelen. Als je de selector aan een element wil koppelen, krijgt de selector de naam van de tag. Voor de opmaak van een class laat je de selector met een punt beginnen. Voor de opmaak van een id laat je de selector met een # beginnen. Schematisch:

selector begint met verwijst naar voorbeeld
letter tag selector div is van toepassing op elk html-element div
. class selector .abc is van toepassing op elk html-element met attribuut class="abc"
# id selector #A132 is van toepassing op het html-element met attribuut id="A132"

Block-level elementen

In de volgende html-code bevat het body-element de tekst "rood oranje geel groen lichtblauw donkerblauw violet". De woorden in deze tekst zijn omgeven door div-elementen.
<!doctype html>
<html lang="en-US">
<head>
    <title>Regenboog</title>
</head>
<body>
    <div class="rood">rood</div>
    <div class="oranje">oranje</div>
    <div class="geel">geel</div>
    <div class="groen">groen</div>
    <div class="lichtblauw">lichtblauw</div>
    <div class="donkerblauw">donkerblauw</div>
    <div class="violet">violet</div>
</body>
</html>       
Een browser geeft deze html-code weer als:
De woorden worden nu niet achter elkaar geplaatst, zoals in een gewone zin, maar onder elkaar. Het div-element is dus geen inline element. We noemen het een block-level element, omdat de inhoud ervan zich als het ware binnen een eigen blok bevindt. De blokken krijgen in dit voorbeeld een een eigen regel.

Een css-bestand koppelen aan een html-bestand; kleur

Om te kunnen zien wat er pecies aan de hand is, koppelen we het html-bestand aan een css-bestand.
<!doctype html>
<html lang="en-US">
<head>
    <title>Regenboog</title>
    <link rel="stylesheet" href="styles.css" />;
</head>
<body>
    <div class="rood">rood</div>
    <div class="oranje">oranje</div>
    <div class="geel">geel</div>
    <div class="groen">groen</div>
    <div class="lichtblauw">lichtblauw</div>
    <div class="donkerblauw">donkerblauw</div>
    <div class="violet">violet</div>
</body>
</html>       
De inhoud van het css-bestand is:
.rood { 
    color: red;
    }
.oranje { 
    color: orange;
    }
.geel { 
    color: gold;
    }
.groen { 
    color: green;
    }
.lichtblauw {
    color: skyBlue;
    }
.donkerblauw { 
    color: blue;
    }
.violet {
    color: blueViolet;
    }
Het resultaat in de browser is dan:
Merk op dat waar de selector begin met een punt, de ruleset wordt gekoppeld aan de betreffende class.

Een ander css-bestand koppelen; achtergrondkleur

We wijzigen in het css-bestand elke color in background-color. De inhoud van het css-bestand wordt:
.rood { 
    background-color: red;
    }
.oranje { 
    background-color: orange;
    }
.geel { 
    background-color: gold;
    }
.groen { 
    background-color: lightGreen;
    }
.lichtblauw {
    background-color: skyBlue;
    }
.donkerblauw { 
    background-color: royalBlue;
    }
.violet {
    background-color: blueViolet;
    }
Als we dan het html-bestand in de browser laten zien, verschijnt:

content (inhoud), padding (voering), border (rand), margin (marge)

We veranderen de inhoud van het css-bestand opnieuw. Het wordt:
.rood { 
    background-color: red;
    padding: 0.5em;
    border: 0.25em solid darkred;
    margin: 0.5em;
    }
.oranje { 
    background-color: orange;
    padding: 0.5em;
    border: 0.25em solid orangeRed;
    margin: 0.5em;
    }
.geel { 
    background-color: yellow;
    padding: 0.5em;
    border: 0.25em solid gold;
    margin: 0.5em;
    }
.groen { 
    background-color: lightGreen;
    padding: 0.5em;
    border: 0.25em solid green;
    margin: 0.5em;
    }
.lichtblauw {
    background-color: deepSkyBlue;
    padding: 0.5em;
    border: 0.25em solid dodgerBlue;
    margin: 0.5em;
    }
.donkerblauw { 
    background-color: royalBlue;
    padding: 0.5em;
    border: 0.25em solid blue;
    margin: 0.5em;
    }
.violet {
    background-color: violet;
    padding: 0.5em;
    border: 0.25em solid darkViolet;
    margin: 0.5em;
    }
In dit css-bestand specificeren we voor elk div-element een achtergrondkleur (background-color) , de afstand van de tekst tot de rand (padding), de dikte van de rand (border), hoe de rand eruit ziet (solid), welke kleur de rand krijgt, en hoe ver het div-element verwijderd moet zijn van elk ander div-element (margin). De afstandsmaat die gebruikt wordt is em. 1em is gelijk aan de font-size. Dat is de hoogte van de letters. Een browser geeft het html-bestand als volgt weer:

Hoe verandert een block-level element mee met de grootte van de viewport?

We bekijken een blick-level-element waarin een tegeltjeswijsheid is opgenomen.
<!doctype html>
<html lang="en-US">
<head>
    <title>Margin Border Padding Content</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="tegel">
        Onderzoekt alle dingen, 
        maar behoudt het goede.
    </div>
</body>
</html>
Het bijbehorende css-bestand heeft de volgende inhoud:
.tegel {
    background-color: aliceBlue;
    padding: 2em;
    border: 1em solid skyBlue;
    margin: 1em;
    }
In een browser zie je mogelijkerwijs het volgende resultaat:
Als je het browser-scherm (de viewport) breder maakt, wordt het block-level element breder:
Horizontaal past het block-level element zich aan aan de breedte van de viewport.
Als je daarentegen de viewport zo smal maakt, dat de tekst niet meer op één regel past, wordt het block-element smaller, maar wordt het block-element in verticale richting langer.
Verticaal gezien blijft het block-level element zo klein mogelijk, maar wel zodanig dat de gehele inhoud er in past.

Inspecteren

Als je rechtsklikt in de viewport, verschijnt een pop-up-menu waarin een menukueze voorkomt die zoiets luidt als "Inspecteren" of "Element inspecteren", of iets dergelijks. Als je als browser Firefox gebruikt, luidt de omschrijving "Inspect (Q)".
Je ziet dan allerlei gegevens over hoe het html-bestand wordt weergegeven door de browser. In eerste instantie bekijk je het tabblad "Inspector".
Dit tabblad kun je onderverdelen in 3 panelen: Search HTML, Filter Styles en Layout.

Html-code en naam stylesheet-bestand in paneel "Search HTML"

In het paneel "Search HTML" vind je de html-code. Je kunt daarin een regel aanklikken. Als je dat doet, worden in de panelen "Filter Styles" en "Layout" gegevens getoond over de aangeklikte regel (die dan een blauwe achtergrondkleur heeft). In het bovenstaande plaatje is de regel <html lang="en-US"> aangeklikt. In het Layout-planeel zie je dan dat de grootte van de hele viewport 461 × 146 pixels groot is.
In het "paneel "Search HTML" zie je in het head-element welk bestand als stylesheet wordt gebruikt.

Css-eigenschappen in paneel "Filter Syles"

Als je in het "paneel "Search HTML" op de de regel <div class="tegel"> ... <-div> klikt, zie je in het paneel "Filter Styles" de css-rulesets die voor dit div-element gelden.

Box Model Properties in paneel "Layout"

Het layout-paneel toont overigens nog meer gegevens, te weten de z.g. Box Model properties.

Hoveren

Als je met de muis boven die regel blijft staan (d.w.z. boven die regel "hovert"), zie je waar dit block-level element div te vinden is in de viewport.
Als je hovert over het body-element div, zie je dat daar default een margin bij ingesteld voor dit block-level element. Deze marge is geel weergegeven.

Tekst centreren

We gaan uit van de volgende html-code :
<!doctype html>
<html lang="en-US">
<head>
    <title>Tekst centreren</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="tegel">
        <div class="tegel_tekst">
        Onderzoekt alle dingen, maar behoudt het goede.
        </div>
    </div>
</body>
</html>
        </div>
    </body>
</html>
De css-code is:
.tegel {
    background-color: aliceBlue;
    padding: 2em;
    border: 1em solid skyBlue;
    margin: 1em;
    }

.tegel_tekst {
    max-inline-size: 20em;
    margin: 0 auto;
    }
De max-inlize-size declaration geeft aan dat de tekst "Onderzoekt alle dingen ... goede" niet breder mag worden dan 20em. De declaration "margin: 0 auto;" geeft aan dat de tekst gecentreerd zal worden. De default font-size (lettergrootte) is 16 pixels. 1em is dus 20 × 16 = 320 pixels. Inspecteren geeft aan dat de tekst iets korter is is dan 320 pixels.
De default-waarde van de declaration voor box-sizing bij de Box Model Properties is "box-sizing: content-box;". Dat betekent: Default geldt dat de grootte van een block-level element als de grootte van de inhoud (content) van het block-level element wordt beschouwd.
Als je de viewport breder maakt, blijft de tekst in het midden staan, en verschuift daardoor naar naar rechts.
Als je de viewport smaller maakt, blijft de tekst gecentreerd, maar als de viewport te smal is om een tekst op de hele regel te kunnen plaatsen, wordt de regel wel op de gewone manier afgebroken.

Flex met horizontaal scrollen

We gaan uit van het volgende html-bestand:
<!doctype html>
<html lang="en-US">
<head>
    <title>Regenboog</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="flexcontainer">
        <div class="rood">rood</div>
        <div class="oranje">oranje</div>
        <div class="geel">geel</div>
        <div class="groen">groen</div>
        <div class="lichtblauw">lichtblauw</div>
        <div class="donkerblauw">donkerblauw</div>
        <div class="violet">violet</div>
     </div>
</body>
</html>
In het css-bestand specificeren we dat voor block-level elementen met class="flexcontainer" de declaration "display: flex"; geldig is.
.flexcontainer {
    display: flex;
    overflow-x: auto;
    }

.rood { 
    background-color: red;
    padding: 0.5em;
    border: 0.25em solid darkred;
    margin: 0.5em;
    }
.oranje { 
    background-color: orange;
    padding: 0.5em;
    border: 0.25em solid orangeRed;
    margin: 0.5em;
    }
.geel { 
    background-color: yellow;
    padding: 0.5em;
    border: 0.25em solid gold;
    margin: 0.5em;
    }
.groen { 
    background-color: lightGreen;
    padding: 0.5em;
    border: 0.25em solid green;
    margin: 0.5em;
    }
.lichtblauw {
    background-color: deepSkyBlue;
    padding: 0.5em;
    border: 0.25em solid dodgerBlue;
    margin: 0.5em;
    }
.donkerblauw { 
    background-color: royalBlue;
    padding: 0.5em;
    border: 0.25em solid blue;
    margin: 0.5em;
    }
.violet {
    background-color: violet;
    padding: 0.5em;
    border: 0.25em solid darkViolet;
    margin: 0.5em;
    }
Als de viewport breed genoeg is, staan de verschillende blokken naast elkaar.
Als je de viewport iets minder breed maakt, kom je op het punt dat de blokken nog net op één regel passen.
Als je de viewport dan nog smaller maakt, bepaalt de declaration "overflow-x: auto;" wat er gaat gebeuren. De waarde auto bij eigenschap overflow-x betekent dat er een horizontale scroll-balk wordt getoond.
Op een PC kun je dan met de muis naar rechts scrollen, op een mobiele telefoon kun je dan naar rechts swipen om de onzichtbare of half-onzichtbare blokken in zijn geheel te tonen.

Flex met onzichtbare of half-onzichtbare blokken doorschuiven naar volgende regel

Als je in het css-bestand de declaration "overflow-x: auto;" wijzigt in "flex-wrap: wrap;" worden de onzichtbare of half-onzichtbare blokken doorgeschoven naar een volgende regel. Het css-bestand ziet er dan als volgt uit:
.flexcontainer {
    display: flex;
    flex-wrap: wrap;
    }

.rood { 
    background-color: red;
    padding: 0.5em;
    border: 0.25em solid darkred;
    margin: 0.5em;
    }
.oranje { 
    background-color: orange;
    padding: 0.5em;
    border: 0.25em solid orangeRed;
    margin: 0.5em;
    }
.geel { 
    background-color: yellow;
    padding: 0.5em;
    border: 0.25em solid gold;
    margin: 0.5em;
    }
.groen { 
    background-color: lightGreen;
    padding: 0.5em;
    border: 0.25em solid green;
    margin: 0.5em;
    }
.lichtblauw {
    background-color: deepSkyBlue;
    padding: 0.5em;
    border: 0.25em solid dodgerBlue;
    margin: 0.5em;
    }
.donkerblauw { 
    background-color: royalBlue;
    padding: 0.5em;
    border: 0.25em solid blue;
    margin: 0.5em;
    }
.violet {
    background-color: violet;
    padding: 0.5em;
    border: 0.25em solid darkViolet;
    margin: 0.5em;
    }
Als de viewport smal is, zie je in de browser zoiets als:

Afstanden

In CSS kom je verschillende eenheden om afstanden te meten tegen. De basis-eenheden zijn:

1in. = 101,6Q = 25,4mm = 2,54cm = 6pc = 72pt = 96px.

Bij de meeste browsers heeft het standaard lettertype (default font-family) een lettergrootte (font-size) van 16px.
Als je geen lengte-eenheid opgeeft, wordt dat door de browser geïnterpreteerd alsof je pixels bedoelt. Anders gezegd: de default lengte-eenheid is pixels.

Een pixel is een enigszings misleidende naam. Een css-pixel hoeft niet exact gelijk te zijn aan een beeldscherm-pixel. Dat is met name het geval bij high-resolution (“retina”) beeldschermen. Het hangt af van een combinatie van de browser, het operating systeem en de hardware hoe lang een pixel werkelijk is, maar gewoonlijk is het 1 inch op het scherm. Het is in dit verband verstandig in het head-element aan het begin van het html-bestand de regel
<meta name="viewport" content="width=device-width, initial-scale=1.0">
op te nemen. Dit commando voorkomt dat teksten op mobiele telefoons veel te klein worden weergegeven.

Bovenstaande eenheden worden absolute eenheden genoemd. Daarnaast heb je nog relatieve eenheden. Hiertoe behoren:

Advies: als je erover twijfelt, kies

Met html-bestand
<!doctype html>
<html lang="en-US">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Rood Groen Blauw</title>
        <link rel="stylesheet" href="try.css" />
    </head>
    <body>
    <div class="flexcontainer">
        <div class="rood">rood</div>
        <div class="groen">groen</div>
        <div class="blauw">blauw</div>
     </div>
    </body>
</html>
en css-bestand
.flexcontainer {
    display: flex;
    flex-wrap: wrap;
    }

.rood { 
    background-color: salmon;
    padding: 0.5em;
    border: 2em solid red;
    margin: 0.5em;
    }
.groen { 
    background-color: lightgreen;
    padding: 0.5em;
    border: 2em solid green;
    margin: 0.5em;
    }
.blauw { 
    background-color: lightblue;
    padding: 0.5em;
    border: 2em solid blue;
    margin: 0.5em;
    }
krijg je in de browser:

Box-sizing

Html-elementen worden weergegeven als een rechthoek die een hoogte en een breedte heeft. Deze hoogte en breedte worden vaak berekend, maar je kunt ook de hoogte opgeven met behulp van de hiervoor genoemde lengte-eenheden. Hoe de hoogte en breedte bepaald worden kun je beïnvloeden met de property block-sizing. Default heeft bock-sizing de waarde content-box. Dat betekent dat width en height betrekking hebben op de breedte en de hoogte van het content-gedeelte van het element. De waarde border-box maakt dat width en height betrekking hebben op de breedte en de hoogte van het border-gedeelte van het element. De volgende html-code bevat twee elementen. Van het ene element wordt de grootte berekend aan de hand van content-box, Van het andere element wordt de grootte bepaald aan de hand van border-box.

<!DOCTYPE html>
<html lang="nl">
    <head>
        <meta charset="utf-8">
        <title>box-sizing</title>
        <link rel="stylesheet" href="styles3.css">
    </head>
    <body>
        <div class="boxSizingContent">
        The quick brown fox jumps over the lazy dog.
        </div>
        <div class= "boxSizingBorder" >
        The quick brown fox jumps over the lazy dog.
        </div>
     </body>
</html>

In het bijbehorende css-bestand wordt de klasse boxSizingContent gekoppeld aan de css-regel "box-sizing: content-box;" en wordt de klasse boxSizingBorder gekoppeld aan de css-regel "box-sizing: border-box;". Verder zijn er geen verschillen tussen de klassen boxSizingContent en boxSizingBorder, afgezien van het feit dat ze anders gekleurd zijn.

.boxSizingContent {
  box-sizing: content-box;
  width: 50%;
  margin: 1em;
  border: 20px solid orange;
  padding: 2em;
  background-color: yellow;
}

.boxSizingBorder {
  box-sizing: border-box;
  width: 50%;
  margin: 1em;
  border: 20px  solid Green;
  padding: 2em;
  background-color: paleGreen;
}

Het resultaat in een browser ziet er als volgt uit:

In het volgende plaatje laten rode pijlen zien welke afstanden gelijk zijn aan de helft van de breedte van het browser-venster, d.i. de viewport.

Het bovenstaand plaatje laat zien dat de afstand tussen de twee rechthoekige elementen ongeveer even groot is als de afstand tussen de linkerkant van de viewport en het rechthoekige element, en ongeveer even groot als de hoogte van de letters, d.i. de lettergrootte (font-size).

Margin Border Padding Content Margin Border Padding Content box-sizing:border-box; box-sizing:content-box;

Box-sizing=border-box instellen voor het hele css-bestand

Het werken met de "box-sizing: border-box"-methode wordt over het algemeen prettiger gevonden. Je hebt dan minder problemen met tekst-gedeelten die recht onder elkaar moeten staan, en niet moeten verspringen. Advies: Laat elk stylesheet beginnen met onderstaande code. Dan geldt voor de hele stylesheet dat de grootte van elk html-element wordt berekend volgens de border-box-methode.
*,
::before,
::after {
  box-sizing: border-box;
}
De * is de universal selector. Als je deze code toevoegt aan het begin van je document, specificeer je met height en width altijd de grootte van het element die het intuïtief voor jou heeft. Padding gooit dan niet zoveel roet in het eten.

Even hoge kolommen

Met flexbox kun je even hoge kolommen bereiken. Het html-bestand

<!DOCTYPE html>
<html lang="nl">
    <head>
        <meta charset="utf-8">
        <title>Even hoge kolommen</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <div class="container">
             <div class="main">
                 Wij, die in concentratiekampen hebben geleefd,
                 wij zijn de gevangenen niet vergeten die door 
                 de barakken liepen om anderen op te beuren en 
                 te troosten, die hun laatste korst brood aan een 
                 medegevangene schonken. Hun aantal was wellicht 
                 klein, toch hebben deze mannen overtuigend
                 bewezen dat één ding de mens
                 niet kan worden ontnomen: de allerlaatste
                 menselijke vrijheid - de keuze onder alle omstandigheden
                 zijn eigen houding te bepalen, zijn eigen
                 weg te kiezen.
             </div>
             <div class="sidebar">
                 Uit "De zin van het bestaan", door 
                 Viktor E. Frankl
             </div>
        </div>
     </body>   
</html>            

met css-bestand

.container {
  display: flex;
}

.main {
  width: 70%;
  background-color: yellow;
  padding: .5em;
}

.sidebar {
  width: 30%;
  background-color: paleGreen;
  padding: .5em;
}

heeft in de browser als resultaat:

Een enkel-raadplegen-site bouwen

Tekst niet te breed laten worden
Als je een tekst bekijkt op een groot beeldscherm, waarop je twee A4-tjes naast elkaar kunt zien, kan een tekstregel erg breed worden. Dat is niet prettig leesbaar. De volgende html-code verwijst helemaal niet naar een css-bestand:
<!doctype html>
<html lang="en-US">
    <head>
        <title>Geheimtalen</title>
    </head>
    <body>
        In de moderne wereld gonst de lucht van codes.
        Bij elk gesprek dat we voeren met een mobiele telefoon, 
        bij elk televisiekanaal waarop we afstemmen,
        bij elke keer dat we geld opnemen bij een pinautomaaat,
        vertrouwen we op uitgekiende versleutelingen door de computer 
        die evoor zorgen dat spiedende oren en ogen van anderen 
        niets kunnen zien of horen.
        (Uit : Geheimtalen, Stephen Pincock en Mark Frary, 2007)
    </body>
</html>
Daarmee zie je op een heel breed beeldscherm:



Ik probeer te bereiken dat een regel niet veel breder is dan wat je op een gewone bladzijde van een boek ziet. Daarom breng ik in het html-bestand een verwijzing naar een stylesheet aan en omgeef ik de tekst met een <div>-tag die verwijst naar een class, die ik "center_strip" noem.
<!doctype html>
<html lang="en-US">
    <head>
        <title>Geheimtalen</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="site_center" class="center_strip">
            In de moderne wereld gonst de lucht van codes.
            Bij elk gesprek dat we voeren met een mobiele telefoon, 
            bij elk televisiekanaal waarop we afstemmen,
            bij elke keer dat we geld opnemen bij een pinautomaaat,
            vertrouwen we op uitgekiende versleutelingen door de computer 
            die evoor zorgen dat spiedende oren en ogen van anderen 
            niets kunnen zien of horen.
            (Uit : Geheimtalen, Stephen Pincock en Mark Frary, 2007)
        </div>
    </body>
</html> 
Het css-bestand ziet er als volgt uit:
:root {
    --max_page_width: 45em;
}

*,
::before,
::after {
    box-sizing: border-box;
}

body {
    font-family: arial, calibri ;
}

.center_strip {
    max-inline-size: var(--max_page_width);
    margin:0 auto;
}
Het eerste commando
:root {
    --max_page_width: 45em;
}

definieert een variabele met de naam --max_page_width. Deze variabele heeft de waarde 45em. Dat is de breedte die een doorsnee regel in een boek heeft. Deze varabele is in het helebestand bruikbaar, want hij is gedefinieerd binnen :root. Het knooppunt :root kwamen we eerder tegen in de paragraaf afstanden

Het tweede commando
*,
::before,
::after {
    box-sizing: border-box;
}
maakt dat je de grootte van alle html-elementen definieert aan de hand van de border van het element. Zie hiervoor de paragraaf Box-sizing=border-box instellen voor het hele css-bestand. Dit commando nemen we standaard op in elk css-bestand.

In het derde commando liezen we ons favoriete lettertype. Dat is Arial, en als dat niet aanwezig is op de computer, dan is het Calibri.
body {
    font-family: arial, calibri ;
}
In het laatste commando gebruiken we de variabele --max_page_width om de maximale breedte van een <div>-tag met class"center-strip" in te stellen. De regel "margin:0 auto;" maakt dat de <div>-tag gecentreerd wordt.
.center_strip {
    max-inline-size: var(--max_page_width);
    margin:0 auto;
Als je het browservenster smal maakt, wordt de tekst normaal over de regels verdeeld.
Als je het browservenster ongeveer zo breed maakt dat een regel ongeveer even lang is als in een gewoon boek, dan wordt de tekst over wat minder regels verdeeld.
Maar maak je het browservenster nog breder, zodat het de breedte van 45em overschrijdt, dan blijft de tekst over evenveel regels verdeeld, en verschijnen er blanco marges links en rechts van de tekst.
items in een lijst horizontaal scrollen
We wijzigen het html-bestand in
<!doctype html>
<html lang="en-US">
    <head>
        <title>Kleuren</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="site_center" class="center_strip">
            <div class="flexcontainer_scroll">
                <div class="rood">rood</div>
                <div class="oranje">oranje</div>
                <div class="geel">geel</div>
                <div class="groen">groen</div>
                <div class="lichtblauw">lichtblauw</div>
                <div class="donkerblauw">donkerblauw</div>
                <div class="violet">violet</div>
                <div class="white">white</div>
                <div class="gray">gray</div>
                <div class="black">black</div>
            </div>
        </div>
    </body>
</html>
Het css-bestand breiden we uit:
/* variabele voor maximale breedte van de tekstregels definiëren*/
:root {
    --max_page_width: 45em;
} 

/* grootte van html-elementen specificeren op basis van border */
*,
::before,
::after {
    box-sizing: border-box;
}

/* gewenst lettertype */
body {
    font-family: arial, calibri ;
}

/* maximale breedte van de tekstregels instellen;
   tekst centreren op brede schermen */
.center_strip {
    max-inline-size: var(--max_page_width);
    margin:0 auto;
}

/* horizontaal scrollen */ 
.flexcontainer_scroll {
    display: flex;
    overflow-x: auto;
    }

.rood { 
    background-color: red;
    padding: 0.5em;
    border: 0.25em solid darkred;
    margin: 0.5em;
    }
.oranje { 
    background-color: orange;
    padding: 0.5em;
    border: 0.25em solid orangeRed;
    margin: 0.5em;
    }
.geel { 
    background-color: yellow;
    padding: 0.5em;
    border: 0.25em solid gold;
    margin: 0.5em;
    }
.groen { 
    background-color: lightGreen;
    padding: 0.5em;
    border: 0.25em solid green;
    margin: 0.5em;
    }
.lichtblauw {
    background-color: deepSkyBlue;
    padding: 0.5em;
    border: 0.25em solid dodgerBlue;
    margin: 0.5em;
    }
.donkerblauw { 
    background-color: royalBlue;
    padding: 0.5em;
    border: 0.25em solid blue;
    margin: 0.5em;
    }
.violet {
    background-color: violet;
    padding: 0.5em;
    border: 0.25em solid darkViolet;
    margin: 0.5em;
    }
.white {
    background-color: white;
    padding: 0.5em;
    border: 0.25em solid lightGray;
    margin: 0.5em;
    }
.gray {
    background-color: lightGray;
    padding: 0.5em;
    border: 0.25em solid gray;
    margin: 0.5em;
    }
.black {
    background-color: gray;
    padding: 0.5em;
    border: 0.25em solid black;
    margin: 0.5em;
    }
Bij een smal browservenster wordt de horizontale lijst afgekapt, maar je kunt scrollen en op die manier de gehele lijst ophalen.
Bij een breed browservenster houd je, indien nodig, de mogelijkheid om te scrollen.
Door naar rechts te scrollen zie je de items in de lijst die eerst onzichtbaar waren.
items in een lijst doorschuiven naar de volgende regels
Het css-bestand breiden we verder uit:
/* variabele voor maximale breedte van de tekstregels definiëren*/
:root {
    --max_page_width: 45em;
} 

/* grootte van html-elementen specificeren op basis van border */
*,
::before,
::after {
    box-sizing: border-box;
}

/* gewenst lettertype */
body {
    font-family: arial, calibri ;
}

/* maximale breedte van de tekstregels instellen;
   tekst centreren op brede schermen */
.center_strip {
    max-inline-size: var(--max_page_width);
    margin:0 auto;
}

/* horizontaal scrollen */ 
.flexcontainer_scroll {
    display: flex;
    overflow-x: auto;
    }

/* items in een lijst naar volgende regel verplaatsen */ 
.flexcontainer_wrap {
    display: flex;
    flex-wrap: wrap;
    }

.rood { 
    background-color: red;
    padding: 0.5em;
    border: 0.25em solid darkred;
    margin: 0.5em;
    }
.oranje { 
    background-color: orange;
    padding: 0.5em;
    border: 0.25em solid orangeRed;
    margin: 0.5em;
    }
.geel { 
    background-color: yellow;
    padding: 0.5em;
    border: 0.25em solid gold;
    margin: 0.5em;
    }
.groen { 
    background-color: lightGreen;
    padding: 0.5em;
    border: 0.25em solid green;
    margin: 0.5em;
    }
.lichtblauw {
    background-color: deepSkyBlue;
    padding: 0.5em;
    border: 0.25em solid dodgerBlue;
    margin: 0.5em;
    }
.donkerblauw { 
    background-color: royalBlue;
    padding: 0.5em;
    border: 0.25em solid blue;
    margin: 0.5em;
    }
.violet {
    background-color: violet;
    padding: 0.5em;
    border: 0.25em solid darkViolet;
    margin: 0.5em;
    }
.white {
    background-color: white;
    padding: 0.5em;
    border: 0.25em solid lightGray;
    margin: 0.5em;
    }
.gray {
    background-color: lightGray;
    padding: 0.5em;
    border: 0.25em solid gray;
    margin: 0.5em;
    }
.black {
    background-color: gray;
    padding: 0.5em;
    border: 0.25em solid black;
    margin: 0.5em;
    }
In het html-bestand wijzigen we de class flexcontainer_scroll in flexcontainer_wrap.
<!doctype html>
<html lang="en-US">
    <head>
        <title>Kleuren</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="site_center" class="center_strip">
            <div class="flexcontainer_wrap">
                <div class="rood">rood</div>
                <div class="oranje">oranje</div>
                <div class="geel">geel</div>
                <div class="groen">groen</div>
                <div class="lichtblauw">lichtblauw</div>
                <div class="donkerblauw">donkerblauw</div>
                <div class="violet">violet</div>
                <div class="white">white</div>
                <div class="gray">gray</div>
                <div class="black">black</div>
            </div>
        </div>
    </body>
</html>
Bij een smal browservenster zie je alle items in de lijst verdeeld over meerdere regels.
Bij een breder browservenster blijft dat zo:
plaatjes
Het volgende html-bestand bevat 3 svg-plaatjes die blauw gekleurd zijn. De eerste twee plaatjes zijn identiek. Het derde plaatje verschilt alleen van de andere twee in de <svg>-tag. Het derde plaatje is namelijk als viewBox gedefinieerd, en niet als plaatje met vaste breedte en hoogte. Het plaatje is daardoor schaalbaar, d.w.z. dat het van grootte kan veranderen.
<!DOCTYPE html>
<html>
    <head>
        <title>svg en css</title>
        <link rel="stylesheet" href="try.css" />
    </head>
    <body>
        <div id="site_center" class="center_strip">
            <div class="picture_scroll">
                <svg width="500" height="50">
                    <rect x="0" y="0" width="400" height="50" fill="lightGreen" />
                    <rect x="400" y="0" width="100" height="50" fill="darkGreen" />
                    <text x="35" y="30">The quick brown fox jumps over the lazy dog</text>
                </svg>
            </div>
            <br><br>
            <div class="picture_scroll">
                <div class="picture_center" > 
                    <svg width="500" height="50">
                        <rect x="0" y="0" width="400" height="50" fill="lightGreen" />
                        <rect x="400" y="0" width="100" height="50" fill="darkGreen" />
                        <text x="35" y="30">The quick brown fox jumps over the lazy dog</text>
                    </svg>
                </div>
            </div>
            <br><br>
            <svg viewBox="0,0 500 50">
                <rect x="0" y="0" width="400" height="50" fill="lightGreen" /> 
                <rect x="400" y="0" width="100" height="50" fill="darkGreen" />
                <text x="35" y="30">The quick brown fox jumps over the lazy dog</text>
            </svg>
        </div>
    </body>
</html>
Het bijbehorende css-bestand ziet er als volgt uit:
/* variabele voor maximale breedte van de tekstregels definiëren*/
:root {
    --max_page_width: 45em;
} 

/* grootte van html-elementen specificeren op basis van border */
*,
::before,
::after {
    box-sizing: border-box;
}

/* gewenst lettertype */
body {
    font-family: arial, calibri ;
}

/* maximale breedte van de tekstregels instellen;
   tekst centreren op brede schermen */
.center_strip {
    max-inline-size: var(--max_page_width);
    margin:0 auto;
}

/* items in lijst horizontaal scrollen */ 
.flexcontainer_scroll {
    display: flex;
    overflow-x: auto;
    }

.picture_scroll {
    overflow-x: auto;
}

.picture_center {
    text-align: center;
} 
Als je de pagina bekijkt met een smal browservenster zie je:
Als je de pagina bekijkt met een breed browservenster zie je:
Een nadeel van een viewBox is dat een tekst die onderdeel is van een plaatje, met het plaatje mee groter of kleiner wordt.
conclusie
Het volgende css-bestand vormt een goed uitgangspunt om een site te maken die er redelijk uitziet:
/* variabele voor maximale breedte van de tekstregels definiëren*/
:root {
    --max_page_width: 45em;
} 

/* grootte van html-elementen specificeren op basis van border */
*,
::before,
::after {
    box-sizing: border-box;
}

/* gewenst lettertype */
body {
    font-family: arial, calibri ;
}

/* maximale breedte van de tekstregels instellen;
   tekst centreren op brede schermen */
.center_strip {
    max-inline-size: var(--max_page_width);
    margin:0 auto;
}

/* items in lijst horizontaal scrollen */ 
.flexcontainer_scroll {
    display: flex;
    overflow-x: auto;
    }

/* voor plaatje dat te breed is om in zijn geheel te tonen
   en je horizontaal wilt kunnen scrollen */
.picture_scroll {
    overflow-x: auto;
}

/* voor plaatje dat gecentreerd moet blijven */
.picture_center {
    text-align: center;
} 

Grid

Met html-bestand

<!DOCTYPE html>
<html lang="nl">
    <head>
        <meta charset="utf-8">
        <title>CSS grid</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
            <div class="grid">
                <div class="linksBoven">
                    aap
                </div>
                <div class="middenBoven">
                    beer
                </div>
                <div class="rechtsBoven">
                    chimpansee
                </div>
                <div class="linksMidden">
                    das
                </div>
                <div class="middenMidden">
                    ezel
                </div>
                <div class="rechtsMidden">
                    fuut
                </div>
                <div class="linksOnder">
                    gans
                </div>
                <div class="middenOnder">
                    honingbij
                </div>
                <div class="rechtsOnder">
                    inktvis
                </div>
            </div>
    </body>
</html> 

en css-bestand

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 0.1em;
}

.grid > * {
    background-color: darkgray;
}

zie je in de browser:

In 'grid-template-columns: 1fr 1fr 1fr;' betekent '1fr 1fr 1fr' dat er drie kolommen zijn en dat alle drie de kolommen even breed worden.

Als je in het css-bestand 'display: grid;' vervangt door 'display: inline-grid;',

.grid {
    display: inline-grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 0.1em;
}

.grid > * {
    background-color: lightgray;
}

dan worden in de browser de kolommen net zo breed als de breedste kolom:

Als je in het css-bestand de regel 'gap: 0.1em;' weglaat,

.grid {
    display: inline-grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}

.grid > * {
    background-color: lightgray;
}

dan verdwijnen in de browser de dunne witte lijnen tussen de grid-elementen:

In het css-bestand geven we elk grid-element een eigen kleur.

.grid {
    display: inline-grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}

.linksBoven {
    background-color: red; 
    color: white;  
}

.middenBoven {
    background-color: orange;  
}

.rechtsBoven {
    background-color: yellow;  
}

.linksMidden {
    background-color: lightblue;  
}

.middenMidden {
    background-color: blue;
    color: white;  
}

.rechtsMidden {
    background-color: violet;  
}

.linksOnder {
    background-color: lightgreen;  
}

.middenOnder {
    background-color: green;  
    color: white;  
}

.rechtsOnder {
    background-color: brown; 
    color: white; 
}

In de browser zie je dan:

Als je bij grid-template-columns 1fr vervangt door auto, dan wordt die kolom net zo breed als het breedste grid-element in die kolom.

.grid {
    display: inline-grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: 1fr 1fr 1fr;
}

.linksBoven {
    background-color: red; 
    color: white;  
}

.middenBoven {
    background-color: orange;  
}

.rechtsBoven {
    background-color: yellow;  
}

.linksMidden {
    background-color: lightblue;  
}

.middenMidden {
    background-color: blue;
    color: white;  
}

.rechtsMidden {
    background-color: violet;  
}

.linksOnder {
    background-color: lightgreen;  
}

.middenOnder {
    background-color: green;  
    color: white;  
}

.rechtsOnder {
    background-color: brown; 
    color: white; 
}

In de browser zie je dan:

We geven de grid-elementen hun grijze kleur weer terug, en trekken verticale lijnen tussen en naast de grid-elementen. Deze nummeren wij vanaf links met 1, 2, 3 en 4.

Op dezelfde manier kunnen we de horizontale lijnen tussen de grid-elementen trekken en van bovenaf nummeren.

Deze lijnen noemen we de grid-lines. We kunnen daarmee deelgebieden van het raster benoemen. Het css-bestand
.grid {
    display: inline-grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: 1fr 1fr 1fr;
}

.grid > * {
    background-color: lightGray;
} 

.linksBoven {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    background-color: red; 
    color: white;  
}

.middenBoven {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    background-color: orange; 
}

.rechtsBoven {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    background-color: yellow; 
}

.linksMidden {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    background-color: lightblue; 
}

.middenMidden {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    background-color: blue; 
    color: white;  
}

.rechtsMidden {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
    background-color: violet; 
}

.linksOnder { 
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    background-color: lightgreen; 
}

.middenOnder { 
    grid-column: 2 / 3;
    grid-row: 3 / 4;
    background-color: green; 
    color: white;  
}

.rechtsOnder { 
    grid-column: 3 / 4;
    grid-row: 3 / 4;
    background-color: brown; 
    color: white;  
}

levert hetzelfde resultaat als hiervoor:

Als we in het css-bestand de grid-elementen in een andere volgorde plaatsen, krijgen we toch weer hetzelfde resultaat.

.grid {
    display: inline-grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: 1fr 1fr 1fr;
}

.grid > * {
    background-color: lightGray;
} 

.rechtsOnder { 
    grid-column: 3 / 4;
    grid-row: 3 / 4;
    background-color: brown; 
    color: white;  
}

.middenOnder { 
    grid-column: 2 / 3;
    grid-row: 3 / 4;
    background-color: green; 
    color: white;  
}

.linksOnder { 
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    background-color: lightgreen; 
}

.rechtsMidden {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
    background-color: violet; 
}

.middenMidden {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    background-color: blue; 
    color: white;  
}

.linksMidden {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    background-color: lightblue; 
}

.rechtsBoven {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    background-color: yellow; 
}

.middenBoven {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    background-color: orange; 
}

.linksBoven {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    background-color: red; 
    color: white;  
}

We delen het 3×3-raster op in drie gebieden.
In het html-bestand definiëren we de inhoud van de drie gebieden binnen een grid-container.

<!DOCTYPE html>
<html lang="nl">
    <head>
        <meta charset="utf-8">
        <title>CSS grid</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
            <div class="grid">
                <div class="linksBoven">
                    aap beer<br>
                    das ezel
                </div>
                <div class="linksOnder">
                    gans honingbij
                </div>
                <div class="rechts">
                    chimpansee<br>
                    fuut<br>
                    inktvis
                </div>
            </div>
    </body>
</html>

In het css-bestand definiëren we dat het om een 3×3-raster gaat, en welke raster-elementen deze drie gebieden beslaan.

.grid {
    display: inline-grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto auto;
    gap: 0.2em;
}

.linksBoven {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    background-color: red; 
    color: white;  
}

.linksOnder { 
    grid-column: 1 / 3;
    grid-row: 3 / 4;
    background-color: blue; 
    color: white;  
}

.rechts { 
    grid-column: 3 / 4;
    grid-row: 1 / 4;
    background-color: green; 
    color: white;  
}

De browser toont

In bovenstaand css-bestand kun je de regel 'grid-template-columns: auto auto auto;' vervangen door 'grid-template-columns: repeat(3, auto);' en de regel 'grid-template-rows: auto auto auto;' door 'grid-template-rows: repeat(3, auto);'.

.grid {
    display: inline-grid;
    grid-template-columns: repeat(3, auto);
    grid-template-rows: repeat(3, auto);
    gap: 0.2em;
}

In het volgende voorbeeld maken we een rij blokjes van elk 100px breed. Het html-bestand ziet er als volgt uit:

<!DOCTYPE html>
<html lang="nl">
    <head>
        <meta charset="utf-8">
        <title>CSS grid</title>
        <link rel="stylesheet" href="basic_css_3.css">
    </head>
    <body>
            <div class="grid">
                <div class="L1">100</div>
                <div class="L2">200</div>
                <div class="L1">300</div>
                <div class="L2">400</div>
                <div class="L1">500</div>
                <div class="L2">600</div>
                <div class="L1">700</div>
                <div class="L2">800</div>
                <div class="L1">900</div>
                <div class="L2">1000</div>
                <div class="L1">1100</div>
                <div class="L2">1200</div>
                <div class="L1">1300</div>
                <div class="L2">1400</div>
                <div class="L1">1500</div>
                <div class="L2">1600</div>
                <div class="L1">1700</div>
            </div>
    </body>
</html> 

En het css-bestand heeft de volgende inhoud:

.grid {
    display: inline-grid;
    grid-template-columns: repeat(20, 100px);
    grid-template-rows: auto;
}

.grid > .L1 {
    background-color: lightGray;
    text-align: right;
} 

.grid > .L2 {
    background-color: black;
    text-align: right;
    color: white;

Het resultaat in de browser is:

In het volgende voorbeeld gebruik ik de grid-techniek om een stukje python-code met toelichting te laten zien.

<!DOCTYPE html>
<html lang="nl">
    <head>
        <meta charset="utf-8">
        <title>CSS python</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
            <div class="grid">
                <div class="links1">
                    
<pre>def main():
    numbers = [1, 2, 3, 5, 7, 11, 
               13, 17, 19, 23, 29]
    quantity = len(numbers)
    total = 0</pre>
                </div>
                <div class="midden1">
                </div>
                <div class="rechts1">
                </div>
                <div class="links2">
<pre>    <font color="red"><b>i = 0</b></font></pre>
                </div>
                <div class="midden2">
                    #
                </div>
                <div class="rechts2">
                    ➊           
                </div>
                <div class="links3">
<pre>    <font color="red"><b style="background-color: yellow;">while i < quantity:</b></font></pre>
                </div>
                <div class="midden3">
                    #
                </div>
                <div class="rechts3">
                    ➋  
                </div>
                <div class="links4">
<pre>        total = total + numbers[i]</pre>
                </div>
                <div class="midden4">
                </div>
                <div class="rechts4">
                </div>
                <div class="links5">
<pre>        <font color="red"><b>i = i + 1</b></font></pre>
                </div>
                <div class="midden5">
                    #
                </div>
                <div class="rechts5">
                    ➌ 
                </div>
                <div class="links6">
<pre>    print(quantity)
    print(total)</pre>
                </div>
                <div class="midden6">
                </div>
                <div class="rechts6">
                </div>
            </div>
    </body>
</html>

Het ccc-bestand dat hierbij hoort heeft de volgende inhoud:

pre { margin: 0px;
} 

.grid {
    display: inline-grid;
    grid-template-columns: auto 20px auto;
    grid-template-rows: auto;
    font-size: 16px;
    text_align: bottom;
}

.grid > * {
    background-color: #eeeeee;
}

.links2 {
    line-height: 22px;
} 

.rechts2 {
    line-height: 22px;
    font-size: 22px;
}

.links3 {
    line-height: 22px;
} 

.rechts3 {
    line-height: 22px;
    font-size: 22px;
}

.links5 {
    line-height: 22px;
} 

.rechts5 {
    line-height: 22px;
    font-size: 22px;
}

Het resultaat in de browser is:

Media-queries

Je gebruikt media-queries om een gedeelte van het html-bestand een andere opmaak te geven afhankelijk van de breedte van het browservenster (dat ook wel viewport genoemd wordt).

In het volgende voorbeeld krijgt het onderdeel waaraan de class 'beginletter_pangram' is toegekend een andere kleur afhankelijk van de breedte van het browservenster. Bij een beginleter-pangram begint elke woord met een volgende letter van het alfabet. Het html-bestand ziet er als volgt uit:

<!DOCTYPE html>
<html lang="nl">
    <head>
        <meta charset="utf-8">
        <title>CSS 2</title>
        <link rel="stylesheet" href="basic_css_2.css">
    </head>
    <body>
            <div class="grid">
                <div class="L1">100</div>
                <div class="L2">200</div>
                <div class="L1">300</div>
                <div class="L2">400</div>
                <div class="L1">500</div>
                <div class="L2">600</div>
                <div class="L1">700</div>
                <div class="L2">800</div>
                <div class="L1">900</div>
                <div class="L2">1000</div>
                <div class="L1">1100</div>
                <div class="L2">1200</div>
                <div class="L1">1300</div>
                <div class="L2">1400</div>
                <div class="L1">1500</div>
                <div class="L2">1600</div>
                <div class="L1">1700</div>
            </div>
            <div class="beginletter_pangram">
                Als beginnend concertist debuteerde een fijngevoelige gitarist, 
                hierna improviseerden jeugdige klankkunstenaars 
                levendig maar notenblind op Peruviaanse quena’s, 
                robuuste slagwerkers trommelden uitzinnige volksmuziek, 
                waarna xylofonisten ‘Yesterday’ zongen.
            </div>
            <div class="grid">
                <div class="L1">100</div>
                <div class="L2">200</div>
                <div class="L1">300</div>
                <div class="L2">400</div>
                <div class="L1">500</div>
                <div class="L2">600</div>
                <div class="L1">700</div>
                <div class="L2">800</div>
                <div class="L1">900</div>
                <div class="L2">1000</div>
                <div class="L1">1100</div>
                <div class="L2">1200</div>
                <div class="L1">1300</div>
                <div class="L2">1400</div>
                <div class="L1">1500</div>
                <div class="L2">1600</div>
                <div class="L1">1700</div>
            </div>
    </body>
</html> 

En het css-bestand heeft de volgende inhoud:

::before,
::after {
    box-sizing: border-box;
}

.beginletter_pangram {
        background-color: lightGray;
    }

@media (max-width: 450px) {
    .beginletter_pangram {
        background-color: black;
        color: white;
    }
}

@media (min-width: 451px) and (max-width: 475px) {
    .pangram {
        background-color: brown;
        color: white;
    }
}

@media (min-width: 476px) and (max-width: 500px) {
    .beginletter_pangram {
        background-color: red;
        color: white;
    }
}

@media (500px < width <= 525px) {
    .beginletter_pangram {
        background-color: orange;
        color: black;
    }
}

@media (525px < width <= 550px) {
    .beginletter_pangram {
        background-color: yellow;
        color: black;
    }
}

@media (550px < width <= 575px) {
    .beginletter_pangram {
        background-color: lightGreen;
        color: black;
    }
}

@media (575px < width <= 600px) {
    .beginletter_pangram {
        background-color: deepSkyBlue;
        color: black;
    }
}

@media (600px < width <= 625px) {
    .beginletter_pangram {
        background-color: royalBlue;
        color: white;
    }
}

@media (625px < width <= 650px) {
    .beginletter_pangram {
        background-color: purple;
        color: white;
    }
}

@media (650px < width <= 675px) {
    .beginletter_pangram {
        background-color: violet;
        color: black;
    }
}

.grid {
    display: inline-grid;
    grid-template-columns: repeat(20, 100px);
    grid-template-rows: auto;
}

.grid > .L1 {
    background-color: lightGray;
    text-align: right;
} 

.grid > .L2 {
    background-color: black;
    text-align: right;
    color: white;
}

Als je het browser-venster heel smal maakt, is het resultaat :

Maak je het browser-venster iets breder, dan wordt de achtergrondkleur grijs en de kleur van de letters zwart:

Maak je het browser-venster nog iets breder, dan wordt de achtergrondkleur rood, en de kleur van de letters weer wit :

Maak je het browser-venster weer iets breder, dan wordt de achtergrondkleur oranje, en de kleur van de letters zwart :

Nog breder, dan wordt de achtergrondkleur geel :